import request from '@/utils/request';
import { useState } from 'react';
import weui from 'weui.js';
import QRCode from 'qrcode';
import { NavBar, Icon } from 'antd-mobile';
import { history } from 'umi';
import ReactWeui from 'react-weui';
const { Dialog } = ReactWeui;
import { setToken } from '@/utils/auth';
import { encryptByPub, getUsernameType } from '@/utils/utils';

export default function Page() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [dialogStyle, setDialogStyle] = useState({ display: 'none' });
  const [qrcode, setQrcode] = useState('');
  const [showDialog, setShowDialog] = useState(false);
  const dialogButtons = [
    {
      type: 'default',
      label: '知道了',
      onClick: () => setShowDialog(false),
    },
  ];

  function navBarGoBack() {
    history.goBack();
  }

  function handleSubmit() {
    var loading = weui.loading('提交中...');
    request('/admin/login', {
      method: 'POST',
      data: {
        name: name,
        password: encryptByPub(password),
        type: getUsernameType(name),
      },
      requestType: 'form',
    })
      .then((res) => {
        console.log(res);
        const { token, data } = res;
        setToken(token);
        history.push('/');
      })
      .finally(() => {
        loading.hide();
      });
  }

  return (
    <div className="page">
      <div className="weui-form">
        <div className="weui-form__text-area">
          <h2 className="weui-form__title">登录</h2>
        </div>
        <div className="weui-form__control-area">
          <div className="weui-cells__group weui-cells__group_form">
            <div className="weui-cells weui-cells_form">
              <label htmlFor="js_input1" className="weui-cell weui-cell_active">
                <div className="weui-cell__hd">
                  <span className="weui-label">用户名</span>
                </div>
                <div className="weui-cell__bd">
                  <input
                    name="name"
                    id="js_input1"
                    className="weui-input"
                    placeholder="请输入用户名"
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                  />
                </div>
              </label>
              <label htmlFor="js_input1" className="weui-cell weui-cell_active">
                <div className="weui-cell__hd">
                  <span className="weui-label">密码</span>
                </div>
                <div className="weui-cell__bd">
                  <input
                    name="password"
                    id="js_input1"
                    className="weui-input"
                    placeholder="请输入密码"
                    onChange={(e) => setPassword(e.target.value)}
                    value={password}
                  />
                </div>
              </label>
            </div>
          </div>
        </div>
        <div className="weui-form__opr-area">
          <button
            type="button"
            role="button"
            disabled={name ? false : true}
            aria-disabled="true"
            className={`weui-btn weui-btn_primary ${
              name ? '' : 'weui-btn_disabled'
            }`}
            id="showTooltips"
            onClick={() => handleSubmit()}
          >
            登录
          </button>
        </div>
        <div className="weui-form__extra-area">
          <div className="weui-footer">
            <p className="weui-footer__links">
              <a className="weui-footer__link">底部链接文本</a>
            </p>
            <p className="weui-footer__text">Copyright © 2008-2019 weui.io</p>
          </div>
        </div>
      </div>
      <div
        className="js_dialog"
        role="dialog"
        aria-hidden="true"
        aria-modal="true"
        aria-labelledby="js_title2"
        id="iosDialog2"
        style={dialogStyle}
      >
        <div className="weui-mask"></div>
        <div className="weui-dialog">
          <div className="weui-dialog__hd">
            <strong className="weui-dialog__title" id="js_title3">
              使用微信扫一扫支付
            </strong>
          </div>
          <div className="weui-dialog__bd">
            {/* <QRCode value={qrcode} size={256} className="img-thumbnail" /> */}
            <img src={qrcode} className="img-thumbnail"></img>
          </div>
          <div className="weui-dialog__ft">
            <a
              role="button"
              className="weui-dialog__btn weui-dialog__btn_primary"
              onClick={() => setDialogStyle({ display: 'none' })}
            >
              知道了
            </a>
          </div>
        </div>
      </div>
      <Dialog
        title="使用微信扫一扫支付"
        show={showDialog}
        buttons={dialogButtons}
      >
        <img src={qrcode} className="img-thumbnail"></img>
      </Dialog>
    </div>
  );
}
